<template>
	<view class="pd pt100">
		<view class="row">
			<view class="col">
				<view class="cf fz30">
					空调（已开）
				</view>
				<view class="mt20 z9 fz24">
					目前温度21℃，风量3级
				</view>
			</view>
				<view class="jkjjnjjhhhs f_b">
					<image src="../../static/img/kaiguang.png" mode="widthFix" class="cz"></image>
				</view>
		</view>
		
		<view class="fz34 cf pm60 mt100">
			温度
		</view>
		<view class="qiun-charts3">
			<canvas canvas-id="canvasArcbar1" id="canvasArcbar1" class="charts3"></canvas>
		</view>
		<view class="mt0 cf fz34">
			风量
		</view>
		<view class="row fz26 cf  cen mt40">
			<view class="col ">
				1
			</view>
			<view class="col ">
				2
			</view>
			<view class="col ">
				3
			</view>
			<view class="col ">
				4
			</view>
			<view class="col ">
				5
			</view>
		</view>
		<slider value="5"  step="5" />
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaArcbar1;
	
	export default {
		data() {
			return {
				cWidth3:'',//圆弧进度图
				cHeight3:'',//圆弧进度图
				arcbarWidth:'',//圆弧进度图，进度条宽度,此设置可使各端宽度一致
				pixelRatio:1,
			}
		},
		onLoad() {
			_self = this;
			this.cWidth3=uni.upx2px(400);//这里要与样式的宽高对应
			this.cHeight3=uni.upx2px(400);//这里要与样式的宽高对应
			this.arcbarWidth=uni.upx2px(80);
			this.getServerData();
		},
		methods: {
			getServerData(){
				let Arcbar1 = {
					series: [{
						data: 0.28,
						color: '#168CD4'
					}]
				};
				_self.showArcbar("canvasArcbar1",Arcbar1);
			},
			showArcbar(canvasId,chartData){
				canvaArcbar1=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize: 11,
					title: {
						name: Math.round(chartData.series[0].data * 100) + '℃',
						color: chartData.series[0].color,
						fontSize: 25 * _self.pixelRatio
					},
					subtitle: {
						name: chartData.series[0].name,
						color: '#666666',
						fontSize: 15 * _self.pixelRatio
					},
					extra: {
						arcbar: {
							type: 'circle', //整圆类型进度条图
							width: _self.arcbarWidth * _self.pixelRatio, //圆弧的宽度
							startAngle: 0.5 //整圆类型只需配置起始角度即可
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: false,
					width: _self.cWidth3 * _self.pixelRatio,
					height: _self.cHeight3 * _self.pixelRatio,
					dataLabel: true,
				});
				
			}
		}
	}
</script>

<style>
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.charts3{
	height: 500upx;
	width: 100%;
}
	
</style>
<style scoped>
	.qiun-charts3{
		width: 400upx;
		margin: auto;
	}
</style>